<template>
  <div class="classify">
    <p style="text-align: center; font-size: 20px">分类</p>
    <div class="left">
      <div
        v-for="(item, index) in categoryList"
        :key="index"
        :class="active === index ? 'active' : ''"
        @click="tab(index, item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="right" @scroll="eleScroll" ref="scrollEle">
      <div v-for="(item, index) in classift" :key="index" class="rl">
        <h3>{{ item.name }}</h3>
        <dl v-for="(ite, inde) in item.rankList" :key="inde">
          <dd>
            <img :src="ite.image" alt="" @click="tz(ite.id)" />
          </dd>
          <dt>
            {{ ite.name }}
          </dt>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getHomeList,
  getClassify,
  getClassDropList,
  getClassDetail,
} from "@/api/classify";
import { defineComponent, computed, reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default defineComponent({
  setup(props, context) {
    let scrollEle = ref();
    let childHeight = reactive([]);
    let active = ref(0);
    let flag = ref(false);
    // 监听元素滚动事件
    function eleScroll(e) {
      let ele = e.currentTarget;
      // 计算滚动元素的高度
      let wrapHeight = ele.getBoundingClientRect().height;
      // 计算子元素的高度
      let _childHeight = [...ele.children].map((item) => {
        return item.getBoundingClientRect().height;
      });
      _childHeight = _childHeight.map((item, index) => {
        return _childHeight.slice(0, index + 1).reduce((total, value) => {
          return (total += value);
        }, 0);
      });
      childHeight = _childHeight;
      // 计算滚动距离
      let scollHeight = e.currentTarget.scrollTop;
      // 计算滚动的位置
      let index = _childHeight.findIndex((item) => item > scollHeight);
      active.value = index;
      console.log("active...", active.value, _childHeight);
    }
    // tab切换
    function changeTab(index) {
      flag.value = true;
      active.value = index;
    }
    // 监听active实现右向左联动
    watch(active, (value) => {
      if (flag.value) {
        scrollEle.value.scrollTop = value ? childHeight[value - 1] : 0;
        console.log("scrollEle", scrollEle);
      }
      flag.value = false;
    });
    let store = useStore();
    let router = useRouter();
    store.dispatch("Classify/getHomeList", { mid: 0 });
    function tab(id, obj) {
      // data.indexa = id;
      store.dispatch("Classify/getClassify", { mid: 0, id: obj });
    }
    function tz(idq) {
      console.log(idq);
      store.dispatch("Classify/getClassDropList", { mid: 0, rankId: idq });
      store.dispatch("Classify/getClassDetail", {
        mid: 0,
        drops: "",
        rankId: idq,
      });
      router.push("/classify");
    }
    return {
      scrollEle,
      eleScroll,
      active,
      tz,
      tab,
      categoryList: computed(() => store.state.Classify.rankCategoryList),
      classift: computed(() => store.state.Classify.classift),
      classList: computed(() => store.state.Classify.classList),
    };
  },
});
</script>

<style>
.right {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: fixed;
  margin-left: 30%;
  padding-bottom: 1rem;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
.right h3 {
  width: 100%;
}
.rl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: 4rem;
}
.rl dl {
  width: 5rem;
  height: 7rem;
  line-height: 1.3rem;
  text-align: center;
}
.rl dl dd {
  text-align: center;
}
.rl dl dd img {
  width: 3rem;
  height: 3rem;
}
.left {
  float: left;
  width: 20%;
  height: 100%;
}
.left div {
  line-height: 1.9rem;
  margin: 1.1rem;
}
.active {
  color: red;
}
</style>
